import {
  BaseInfoType,
  EventInfo,
  MenuToConfigMappingType,
} from "../../../framework/core/AbstractDefinition";
import { ClazzTemplate } from "../../common-component/CommonTypes";
import { MenuInfo } from "../../../designer/right/MenuType";
import IotGreaseImg from "./iot-jzj.png";
import { IotGreaseController } from "./IotGreaseController";
import { IotGreaseComponentProps } from "./IotGreaseComponent";
import React from "react";
import AbstractDesignerDefinition from "../../../framework/core/AbstractDesignerDefinition";
import { IotGreaseStyleConfig } from "./IotGreaseConfig";
import { IotGreaseDeviceConfig } from "./IotGreaseDeviceConfig";

const BaseInfo = React.lazy(
  () => import("../../common-component/base-info/BaseInfo")
);
const ThemeConfig = React.lazy(
  () => import("../../common-component/theme-config/ThemeConfig")
);
const AnimationConfig = React.lazy(
  () => import("../../common-component/animation-config/AnimationConfig")
);
const FilterConfig = React.lazy(
  () => import("../../common-component/filter-config/FilterConfig")
);

export default class IotGreaseDefinition extends AbstractDesignerDefinition<
  IotGreaseController,
  IotGreaseComponentProps
> {
  getBaseInfo(): BaseInfoType {
    return {
      compName: "加脂机",
      compKey: "IotGrease",
      categorize: "data",
      width: 210,
      height: 120,
      code: 109, //
    };
  }

  getChartImg(): string | null {
    return IotGreaseImg;
  }

  getController(): ClazzTemplate<IotGreaseController> | null {
    return IotGreaseController;
  }

  getInitConfig(): IotGreaseComponentProps {
    return {
      base: {
        id: "",
        name: "加脂机",
        type: "IotGrease",
        code: 109, // 16路开关量
      },
      style: {
        color: "#00a870",
        fontSize: 16,
        alignItems: "center",
        justifyContent: "center",
        borderColor: "#2772C9",
        borderRadius: 10,
      },
      filter: {
        enable: false,
        blur: 0,
        brightness: 1,
        contrast: 1,
        opacity: 1,
        saturate: 1,
        hueRotate: 0,
      },
      device: {
        terminalId: "",
        deviceCode: "",
        position: "",
      },
    };
  }

  getMenuList(): Array<MenuInfo> {
    return super
      .getMenuList()
      .filter(
        (item: MenuInfo) =>
          item.key !== "theme" &&
          item.key !== "data" &&
          item.key !== "filter" &&
          item.key !== "base"
      );
  }

  getMenuToConfigContentMap(): MenuToConfigMappingType {
    return {
      base: BaseInfo,
      style: IotGreaseStyleConfig,
      animation: AnimationConfig,
      theme: ThemeConfig,
      filter: FilterConfig,
      device: IotGreaseDeviceConfig,
    };
  }

  getEventList(): EventInfo[] {
    const events = super.getEventList();
    return events.concat([
      {
        id: "click",
        name: "点击时",
      },
    ]);
  }
}
